<template>
  <div>
    <v-card style="background:#fff;min-height:341px;">
        <div style="text-align:left;padding:30px 0 30px 25px;">
            <span :class="{selectTop:isTopSelect}" @click="isTopSelect=true" style="cursor: pointer;">概况</span>
            <span :class="{selectTop:!isTopSelect}"  @click="isTopSelect=false" style="margin-left:30px;cursor: pointer;">扫码日志</span>
        </div>
        <div style="text-align:left;padding-left:30px;"><v-icon style="font-size:17px">center_focus_weak</v-icon>&nbsp;扫描整体情况</div>
        <v-layout row wrap style="padding:25px;" v-if="isTopSelect">
            <v-flex xs4 class="center-item">
                <div class="a1 center-item-container">
                  <div class="center-item-top">
                    昨日扫描
                  </div>
                  <div class="center-item-middle">
                    262
                  </div>
                  <div class="center-item-bottom">
                    <div style="float:left">追溯码 12342</div>
                    <div style="float:right">验证码 257</div>
                  </div>
                </div>
            </v-flex>
            <v-flex xs4 class="center-item">
                <div class="a2 center-item-container">
                  <div class="center-item-top">
                    今日扫描
                  </div>
                  <div class="center-item-middle">
                    262
                  </div>
                  <div class="center-item-bottom">
                    <div style="float:left">追溯码 12342</div>
                    <div style="float:right">验证码 257</div>
                  </div>
                </div>
            </v-flex>
            <v-flex xs4 class="center-item">
                <div class="a3 center-item-container">
                  <div class="center-item-top">
                    总扫描
                  </div>
                  <div class="center-item-middle">
                    262
                  </div>
                  <div class="center-item-bottom">
                    <div style="float:left">追溯码 12342</div>
                    <div style="float:right">验证码 257</div>
                  </div>
                </div>
            </v-flex>
        </v-layout>
        <v-layout row wrap style="padding:20px;" v-if="!isTopSelect">
           11dasjf
           <div style="height:400px;"></div>
        </v-layout>
    </v-card>
    <br>
    <v-card style="background:#fff;height:458px;" v-show="isTopSelect">

    </v-card>
    <br>
    <v-card style="background:#fff;height:458px;" v-show="isTopSelect">

    </v-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isTopSelect: true
    }
  }
}
</script>
<style>
    .center-item{
        height: 164px;
        min-height: 164px;
    }
    .center-item-container{
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
      padding: 20px 30px;
      text-align: left;
      color: white
    }
    .center-item-top{
      font-size: 18px;
      border-left: 4px solid white;
      padding-left: 10px;
    }
    .center-item-middle{
      font-size: 60px;
      font-weight: 900;
      text-align: center;
    }
    .center-item-bottom{
      font-size: 16px;
    }
    .a1{
        background-image:url(./../assets/content/11-img.png);
    }
    .a2{
        background-image:url(./../assets/content/12-img.png);
    }
    .a3{
        background-image:url(./../assets/content/13-img.png);
    }
    .selectTop{
        color:#2fc687;
        border-bottom:2px solid #2fc687;
        padding-top: 5px;
    }
</style>
